<template>
  <div class="page-index">
    <div class="pageBanner" style="width: 100%; height: 237px">
      <video
        src="/portal/apps/com.awspaas.user.apps.sfeg.tu.honor/video_order.mp4"
        controls
        style="width: 100%; height: 237px"
        poster="../../assets/banner.jpg"
      ></video>
      <!-- <img src="../../assets/banner.jpg" alt=""  style="width:100%"> -->
    </div>
    <div style="       padding: 0px 20px 0 20px;    background: linear-gradient(180deg, #D1E0FF 1%, rgba(255, 255, 255, 0) 88%);">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in resultData" :key="index" style="font-size:14px;font-family: Source Han Sans, Source Han Sans;
        font-weight: 350;
        font-size: 14px;
        color: #333333;line-height: 24px;">
         {{ item.NOTICE }}
        </van-swipe-item>
        
      </van-swipe>
    </div>
    <div  class="newPageTop">
      <div class="newpageTopBtn" style="">
        <div class="newpageTopBtnBg">
          <span>预约码</span>
        </div>
      </div>
      <div class="newPageCenter">
        <div class="pageQcrod" style="text-align: center;width: 160px;height:160px;    margin: 21px auto;" v-if="show">
          <img style="width: 150px;height:150px;" :src="imageSrc" alt="">
          <div>
            <div style="       text-align: left;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
           ">
              已预约场馆:  <span style="font-family: Source Han Sans, Source Han Sans;
              font-weight: 400;
              font-size: 14px;
              color: #62C980;">{{ venues }}</span> 
            </div>
            <div style="       text-align: left;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
           ">
              预约时间: <span style="font-family: Source Han Sans, Source Han Sans;
              font-weight: 400;
              font-size: 14px;
              color: #62C980;"> {{ orderDate }}</span>
            </div>
          </div>
         
        
        </div>
        <div class="pageQcrod" style="text-align: center;width: 160px;height:160px;    margin: 21px auto;" v-else>
          <img style="width: 150px;height:150px;" src="../../assets/fitness/pic_code_null.png" alt="">
          <div style="    font-family: Source Han Sans, Source Han Sans;
          font-weight: 400;
          font-size: 14px;
          color: #999999;margin-top:1px;">
            {{ msg }}
          </div>
        </div>
        <div class="pageQcrod" style="text-align: center;width: 150px;height:150px;    line-height: 150px;    margin: 0 auto;    font-size: 16px;" v-else>
          
        </div>
        <div class="newPageCenterreflensh"  @click="del()">
          <div class="newPageCenterreflenshTitle">
            <img src="../../assets/fitness/icon_refresh.png" alt="" style="width: 16px;
            height: 16px;
            vertical-align: middle;
            margin-top: -5px;">
            <span style="    margin-left: 5px;">刷新二维码</span>
          </div>
        </div>
      </div>
    </div>
  
    <!-- <div class="pageTop">
      <div class="pageTopBtn">
        <span>预约码</span>
      </div>
      <div class="pageQcrod" style="text-align: center;width: 150px;height:150px;    margin: 21px auto;" v-if="show">
        <img style="width: 150px;height:150px;" :src="imageSrc" alt="">

      </div>
      <div class="pageQcrod" style="text-align: center;width: 150px;height:150px;    line-height: 150px;    margin: 0 auto;    font-size: 16px;" v-else>
        {{ msg }}
      </div>
      <div style="    font-size: 18px;
      text-align: center;">
        已预约场馆: {{ venues }}
      </div>
      <div style="    font-size: 18px;
      text-align: center;">
        预约时间: {{ orderDate }}
      </div>
      <div class="pageBottom">
     
        <div
          class="pageBottomCenter"
          style="
            font-size: 18px;
            color: #b69e9e;
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: space-between;
          "
        >
          <div style="flex: 0 0 25%"></div>
          <div @click="del()">刷新</div>
          <div>
            <div
              class="pageButtonRc"
              style="
              
               
                border-radius: 5px;
                text-align: center;
                margin-right: 15px;
              "
              @click="toDetail()"
            >
              我的预约
            </div>
          </div>
    
        </div>
   
      </div>
    </div> -->
   
    <div class="pageButton">
      <div class="pageButtonRc" @click="toView(0)">
       
      
        <div> <img src="../../assets/fitness/icon_ruchang.png" alt="" style="width: 20px;
          height: 20px;
          vertical-align: middle;">入场预约</div>
      </div>
      <div  class="pageButtonPt" @click="checkPeople">
     
      
        <div>   <img src="../../assets/fitness/icon_qinyou.png" alt="" style="width: 20px;
          height: 20px;
          vertical-align: middle;">我的亲友</div>
      </div>
      <div class="pageButtonZx" @click="toView(5)">
      
      
        <div>  <img src="../../assets/fitness/icon_zhuanxiang.png" alt="" style="width: 20px;
          height: 20px;
          vertical-align: middle;">专项预约</div>
      </div>
    
  
   
    </div>
    <div  @click="toDetail()" class="myseru">
      <div class="myseruBTN">  <img src="../../assets/fitness/icon_yuyue.png" alt="" style="width: 20px;
        height: 20px;
        vertical-align: middle;">我的预约</div>
    </div>
    
    <!-- <div class="back" @click="toBack">
      <span>返回</span>
    </div> -->
  </div>
</template>
<script>
import QRCode from "qrcode";

import { getCarous } from "../../api/index";

export default {
  data() {
    return {
      qcrodObj: "",
      show:true,
      msg:'',
      venues:'',
      orderDate:'',
      imageSrc:'',
      resultData:[]
    };
  },
  components: {},
  filters: {},
  computed: {
   
  },
  mounted() {
    // this.generateQRCode();
    this.initList();
    this.initNotice();
  },
  created() {
   
  },
  methods: {
    del(){
      this.initList();
    },
    //获取消息通知
      initNotice(){
         
      var param = {
        cmd: "com.awspaas.user.apps.sfeg.tu.honor.get_venue_notice",

        dduserid: window.dduserid,
      };

      getCarous(param).then((res) => {
        const { result, msg, data, id } = res;

        if (result == "ok") {
          console.log(res,'res')
          this.resultData=res.data.resultData;
     
        } else {
          // this.finished = true;
        }
      });
      },
    //获取二维码
    initList() {
    
      var param = {
        cmd: "com.awspaas.user.apps.sfeg.tu.honor.get_my_order_venues_qdrcode",

        dduserid: window.dduserid,
      };

      getCarous(param).then((res) => {
        const { result, msg, data, id } = res;

        if (result == "ok") {
     
          if(res.data.result =='success'){
            this.qcrodObj = res.data.qrcode;
            const url = "data:image/png;base64," + this.qcrodObj;
            this.$nextTick(() => {
      this.imageSrc = url;
    });
            this.venues=res.data.venues;
            this.orderDate=res.data.orderDate;
          }else{
            this.qcrodObj='';
            this.show=false;
            this.msg=res.data.msg;
        
       
          }
       
     
        } else {
          // this.finished = true;
        }
      });
    },
    toBack() {
      window.history.go(-1);
    },
    toDetail() {
      this.$router.push({
        name: "myList",
      });
    },
    // 跳转至页面
    toView(num) {
      this.$router.push({ path: `/fixedBox/${num}` });
    },
    checkPeople() {
      this.$router.push({
        name: "people",
      });
    },
    generateQRCode(appointmentStatus, verificationStatus) {
      appointmentStatus = "reserved";
      verificationStatus = "verified";
      const canvas = this.$refs.qrcodeCanvas;
      let qrData = "55555555555"; // 默认的二维码数据
      let backgroundColor = "#FFFFFF"; // 默认背景色，假设为白色

   

      const options = {
        scale: 6,
        color: {
          dark: "#000000",
          light: backgroundColor, // 使用动态设置的背景色
        },
      };

      QRCode.toCanvas(canvas, qrData, options, (error) => {
        if (error) {
        } else {
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.back {
  text-align: center;
  span {
    background: #ffffff;
    color: #0d63e9;
    font-size: 17px;
    padding: 6px 30px;
    border-radius: 10px;
  }
}
.newPageTop{
  position: relative;
  height: 400px;

  .newpageTopBtn{
    position: absolute;
    z-index: 5;
    /* top: -25px; */
    top: 21px;
    background-image: url("../../assets/fitness/bg_code.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 96px;
    .newpageTopBtnBg{
      width: 100%;
   
      height: 100%;
      text-align: center;
      line-height: 96px;
      span{
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 18px;
        color: #FFFFFF;
      }
    }
  }
  .newPageCenter{
    height: 300px;
    z-index: 5;
    position: absolute;
    background: #ffffff;
    width: 94%;
    /* margin: 0 16px; */
    /* padding: 0 10px; */
    /* top: 50%; */
    /* left: 0; */
    left: 3%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    bottom: 1px;
  }
  .newPageCenterreflenshTitle{
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 400;
    font-size: 14px;
    color: #0256FF;
    margin-top: 48px;
    text-align: center;
    border-top: 1px solid #F0F0F0;
    padding-top: 15px;
  }
}
.page-index {
  background: #FAFAFA;
  height: 100vh;
  overflow: auto;
  .pageTop {
    background: #ffffff;
    /* padding: 15px; */
    margin: 15px;
    border-radius: 5px;
    
    padding: 30px 0;
    .pageTopBtn {
      text-align: center;
      /* margin-top: 15px; */
      padding-top: 5px;
      span {
        background: #4472c4;
        color: #ffffff;
        font-size: 24px;
        padding: 2px 8px;
        border-radius: 5px;
      }
    }
    .pageBottom {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .pageBottomLeft {
        display: flex;
        // align-items: center;
        .pageBottomLeftImg {
          width: 18px;
          height: 18px;

          img {
            width: 100%;
            height: 100%;
          }
        }
        .pageBottomLeftTitle {
          font-size: 16px;
          color: #9b8f8f;
          margin-left: 8px;
        }
      }
      .pageBottomRight {
        display: flex;
        //  align-items: center;
        .pageBottomLeftImg {
          width: 18px;
          height: 18px;

          img {
            width: 100%;
            height: 100%;
          }
        }
        .pageBottomLeftTitle {
          font-size: 16px;
          margin-left: 8px;
          color: #9b8f8f;
        }
      }
    }
  }
  .myseru{
    text-align: center;
    color: #ffffff;
    .myseruBTN{
      background-image: url("../../assets/fitness/btn_yuyue_big.png");
      background-size: cover;
      padding: 12px 0;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 500;
      font-size: 14px;
      background-position: center center; 
    }
  }
  .pageButton {
    display: flex;
    font-size: 14px;
    margin: 15px 0;
    justify-content: space-around;
    .pageButtonRc {
    
    
      background-image: url("../../assets/fitness/btn_ruchang.png");
      background-size: cover;
      color: #ffffff;
 
      flex: 0 0 33%;
      border-radius: 5px;
      text-align: center;
      div{
        padding: 18px 12px 12px 12px;
      }
    }
    .pageButtonPt {

   
      background-image: url("../../assets/fitness/btn_zhuanxiang.png");
      background-size: cover;
      color: #ffffff;
   
      flex: 0 0 33%;
      border-radius: 5px;
      text-align: center;
      div{
        padding: 18px 12px 12px 12px;
      }
    }
    .pageButtonZx {
 

      background-image: url("../../assets/fitness/btn_qinyou.png");
      background-size: cover;
      color: #ffffff;
     
      flex: 0 0 33%;
      border-radius: 5px;
      text-align: center;
      div{
        padding: 18px 12px 12px 12px;
      }
    }
  }
}
</style>

